import React, {Component} from 'react';
import {StyleSheet, View, Image, Text} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';
import home from './HomePage';
import tree from './TreePage';
import * as colors from '../utils/ColorUtils';

export default class MainTabPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedTab: 'home'
        };
    }

    renderTabBarItem(title, iconName, iconSelectName, selectedTab, componentName, Component) {
        return (
            <TabNavigator.Item
                title={title}
                renderIcon={() => <Image
                    source={{uri: iconName}}
                    style={styles.icon}
                />}
                renderSelectedIcon={() => <Image
                    source={{uri: iconSelectName}}
                    style={styles.icon}
                />}
                selected={this.state.selectedTab === selectedTab}
                onPress={() => {
                    this.setState({selectedTab: selectedTab})
                }}
                titleStyle={styles.tabText}
                selectedTitleStyle={styles.selectedTabText}
            >
                <Component/>
            </TabNavigator.Item>
        )
    }

    render() {
        return (
            <TabNavigator tabBarStyle={styles.Tab}>
                {/*--首页--*/}
                {this.renderTabBarItem('首页', 'icon_home_l', 'icon_home_h', 'home', '主页', home)}
                {/*--体系--*/}
                {this.renderTabBarItem('体系', 'icon_sort_l', 'icon_sort_h', 'tree', '体系', tree)}
            </TabNavigator>
        );
    }
}

let styles = StyleSheet.create({
    container: {
        flex: 1
    },
    tabText: {
        color: colors.txt_5,
        fontSize: 13
    },
    selectedTabText: {
        color: colors.colorTheme,
        fontSize: 13
    },
    icon: {
        width: 25,
        height: 25
    }
});